<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" onchange="upload(event)">
    <div id="output"></div>
</body>
<script>
    // 对象 URL 有时候也称作 Blob URL，是指引用存储在 File 或 Blob 中数据的 URL。
    // 对象 URL 的优点是不用把文件内容读取到 JavaScript 也可以使用文件。只要在适当位置提供对象 URL 即可。
    // 要创建对象 URL，可以使用 window.URL.createObjectURL()方法并传入 File 或 Blob 对象。这个函数返回
    // 的值是一个指向内存中地址的字符串。因为这个字符串是 URL，所以可以在 DOM 中直接使用。
    // 如果把对象 URL 直接放到<img>标签，就不需要把数据先读到 JavaScript 中了。<img>标签可以直接从相应的内存位置把数据读取到页面上。

    // 使用完数据之后，最好能释放与之关联的内存。只要对象 URL 在使用中，就不能释放内存。
    // 如果想表明不再使用某个对象 URL，则可以把它传给 window.URL.revokeObjectURL()。
    // 页面卸载时，所有对象 URL 占用的内存都会被释放。
    function upload(event){
        let files = event.target.files;
        const url = window.URL.createObjectURL(files[0]);//获取上传文件在内存中的地址，为一个URL字符串形式
        console.log(url); //blob:null/fa4b206d-77ec-4d3f-8ac4-58abbf82d8c4
        if(url){
            let outputDOM = document.getElementById('output');
            outputDOM.innerHTML = `<img src=${url}>`
        }
    }
</script>
</html>



























